/*
* Copyright IBM Corp. 2025, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/

$css--plex: true !default;

@use 'sass:map';
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/colors' as *;
@use '@carbon/styles/scss/reset';
@use '@carbon/styles/scss/type';
@use '@carbon/styles/scss/config' as carbon-config;

$prefix: 'c4p';
$block-class: #{$prefix}--options-tile;

:host(#{$prefix}-options-tile) {
  position: relative;

  .#{$block-class} {
    position: relative;
    background: $layer-01;
    border-block-end: 1px solid $border-subtle-01;

    ::marker,
    ::-webkit-details-marker {
      display: none;
      content: '';
    }

    &__header,
    &__static-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      block-size: $spacing-09;
      padding-inline: $spacing-05;
      padding-inline-end: $spacing-05;
    }

    &__header {
      cursor: pointer;

      &:hover {
        background: $background-hover;
      }

      &:focus {
        outline: 2px solid $focus;
        outline-offset: -2px;
      }

      &-left {
        display: flex;
        align-items: center;
      }

      &-right {
        position: absolute;
        display: flex;
        align-items: center;
        block-size: $spacing-09;
        inset-block-start: 0;
        inset-inline-end: 0;
        padding-inline: $spacing-05;
      }

      &--has-toggle {
        inline-size: calc(100% - ($spacing-09 + ($spacing-05 * 3)));
      }
    }

    &__title {
      @include type.type-style('heading-compact-01');

      &-block {
        margin-inline-end: $spacing-05;
        margin-inline-start: $spacing-05;
      }
    }

    &__summary {
      @include type.type-style('helper-text-01');

      display: flex;
      align-items: center;
      color: $text-secondary;
      gap: $spacing-02;
      margin-block-start: $spacing-02;

      &--locked {
        color: $text-secondary;
      }

      &--warn {
        color: $text-primary;

        svg {
          color: $support-warning;

          path[fill='none'] {
            fill: $black-100;
          }
        }
      }

      &-icon {
        flex-shrink: 0;
      }

      &-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    &__body {
      padding-block-end: $spacing-06;
      padding-block-start: $spacing-03;
      padding-inline: $spacing-05;
      padding-inline-start: $spacing-09;
    }
  }

  .#{$block-class}--lg {
    .#{$block-class}__summary {
      margin-block-start: $spacing-01;
    }
  }

  .#{$block-class}--xl {
    .#{$block-class}__header {
      block-size: $spacing-10;
    }

    .#{$block-class}__summary {
      margin-block-start: $spacing-01;
    }
  }

  .#{$block-class}--open {
    .#{$block-class}__chevron {
      transform: rotate(-180deg);
    }

    .#{$block-class}__summary {
      display: none;
    }
  }
}