@use '~@moda/om';

.Expandable {
  $self: &;

  display: flex;
  flex-direction: column;

  &__name {
    @include om.text(body1);

    position: relative;
    text-align: left;
    cursor: pointer;
    padding: om.spacing(3, 5, 3, 0);
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &__icon {
    height: 100%;
    padding-top: om.space(4);
    position: absolute;
    right: 0;
    top: 0;
  }

  &__contents {
    @include om.stack(2);
    @include om.text(body1);

    padding-bottom: om.space(3);
    display: none;
    color: om.color(ink);

    ul,
    ol {
      padding-left: om.space(4);
      list-style: disc;
    }

    a {
      color: om.color(ink);
    }
  }

  &--plus-minus {
    #{$self}__name {
      &::before,
      &::after {
        content: '';
        display: block;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        height: 1px;
        width: om.space(4);
        background-color: om.color(ink);
      }

      &::before {
        transform: translateY(-50%) rotate(90deg);
        transition: transform 200ms;
      }
    }
  }

  &--expanded {
    #{$self}__name {
      &::before {
        transform: translateY(-50%);
      }
    }

    #{$self}__contents {
      display: block;
    }
  }

  &--with-border {
    border-top: 1px solid om.color(noise);
  }

  &--dark-background {
    border-color: om.color(cement);
    color: om.color('snow');

    #{$self}__name {
      &::before,
      &::after {
        background-color: om.color('snow');
      }
    }

    #{$self}__contents {
      color: om.color('snow');
    }
  }
}