.layout-setting {
  --mat-form-field-filled-container-color: transparent;
  --mat-option-label-text-size: 15px;
  --mat-form-field-container-text-size: 15px;
  ::ng-deep {
    h2.title-header {
      @apply capitalize;
    }
    input.mat-mdc-input-element,
    .mat-mdc-form-field {
      font-size: 15px;
    }

    .none-description {
      @apply text-sm p-3 rounded-[4px] opacity-70;
      background-color: var(--mat-sys-error-container);
      border-left: 4px solid var(--mat-sys-error);
      box-shadow: var(--mat-sys-level1);
    }
  }
  .mat-mdc-list-item {
    @apply opacity-80 rounded-[5px];
    margin: 4px 0;
    background-color: var(--mat-sys-primary-fixed);
    &.cdk-drag {
      @apply cursor-move;
    }
    .title {
      @apply text-sm;
    }
    .actions {
      @apply hidden absolute top-1/2 right-0;
      transform: translateY(-50%);
    }

    ::ng-deep {
      .mat-mdc-icon-button {
        &.mat-mdc-button-base {
          --mat-icon-button-state-layer-size: 30px;
          padding: 0;
        }
        opacity: 0.6;
        .custom.mat-icon {
          svg {
            width: 16px !important;
            height: 16px !important;
            line-height: 16px !important;
          }
        }
        &:hover {
          @apply opacity-100;
        }
      }
    }
    &:hover {
      @apply opacity-100;
      .actions {
        @apply flex;
      }
    }
  }
}
