@import "variables";

.editable-container {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  background-color: $blue-900;
  padding: 24px;
  border: 1px solid transparent;
  border-radius: 4px;

  &.dark-theme {
    background-color: transparent;
  }

  &.disable-edit {
    height: unset;
  }

  &.edit-mode {
    z-index: 101;
    border: 1px dashed #8f9cc9;
    box-shadow: 0 0 10px rgba(0, 0, 0, .15);
    border-radius: 4px;
  }

  .edit-wrapper {
    position: sticky;
    z-index: 99;
    text-align: right;
    height: 0;
    opacity: 0;
    gap: 12px;
  }

  .edit-pen {
    z-index: 1;
    transition: opacity 0.5s, background-color ease-in-out 0.3s;
    background-color: $blue-600;
    color: $blue-300;
    border-radius: 4px;

    &:hover {
      background-color: $blue-500;
    }
  }

  .cancel-save {
    position: relative;
    text-align: right;
    opacity: 0;
    z-index: -1;
    width: 180px;
    margin-left: auto;

    &.edit-mode {
      opacity: 1;
      z-index: 99;
      display: flex;
      justify-content: flex-end;
    }

    .cancel {
      border: 1px solid $grey-purple;
      background-color: #ffffff;
      color: $grey-purple;
      margin-right: 10px;
      transition: all ease-in-out 0.15s, border ease-in-out 0.15s;

      &:hover {
        border: 1px solid $blue-500;
        background-color: $blue-500;
        color: #FFFFFF;
      }
    }

  }

  &:hover, &.force {
    .edit-wrapper {
      opacity: 1;
    }
  }
}

:host {
  ::ng-deep .action-button button {
    min-width: 70px;
  }
}

:host-context(.light-theme) {
  .editable-container{
    background-color: white;

  }
  .edit-pen {
    background-color: $blue-480;
    color: white;
  }
}


:host-context(.generic-container) {
  .editable-container {
    border: 1px solid $blue-100;
    margin-top: 24px;
    padding: 12px 24px 24px 24px;
  }
}
