src/views/Encounter.scss
@use '../scss/variables' as var;

.encounter {
  margin-top: var.$padding-md;
  font-size: var.$font-size-sm;
  flex: 0 0 auto;
  width: 3.84rem;
  display: flex;
  backdrop-filter: var.$filter;

  &-reverse {
    margin-bottom: var.$padding-md;
  }

  &-duration {
    cursor: pointer;
    flex: 0 0 auto;
    height: var.$size-form;
    width: var.$size-form * 2 + 0.01rem;
    line-height: var.$size-form;
    text-align: center;
    color: var(--color-cover-fg);
    background-color: var(--color-cover-bg);
    text-shadow: var(--shadow-encounter);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow-y: hidden;

    &--active {
      color: var(--color-cover-fg-active);
      background-color: var(--color-cover-bg-active);
      text-shadow: var(--shadow-encounter-active);
    }

    &:hover {
      color: var(--color-form-fg-active);
      background-color: var(--color-form-bg-active);
      text-shadow: none;
    }
  }

  &-content {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: nowrap;
    height: var.$size-form;
    line-height: var.$size-form;
    color: var(--color-encounter-fg);
    background-color: var(--color-encounter-bg);
    text-shadow: var(--shadow-encounter);
    white-space: nowrap;
    overflow: hidden;

    &-zone {
      padding-left: var.$padding-xl;
      flex: 1 1 auto;
      text-align: left;
      white-space: nowrap;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &-numbers {
      padding-right: var.$padding-xl;
      padding-left: var.$padding-lg;
      flex: 0 0 auto;
      cursor: pointer;

      &:hover {
        color: var(--color-form-fg-active);
        background-color: var(--color-form-bg-active);
        text-shadow: none;
      }
    }

    &--full {
      .encounter-content-zone {
        padding-right: var.$padding-xl;
      }

      .encounter-content-numbers {
        display: none;
      }
    }
  }

  &-btns {
    display: flex;
    color: var(--color-cover-fg);
    background-color: var(--color-cover-bg);
  }

  &-btn {
    cursor: pointer;
    position: relative;
    flex: 0 0 auto;
    height: var.$size-form;
    width: var.$size-form;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;

    &:hover {
      color: var(--color-form-fg-active);
      background-color: var(--color-form-bg-active);
    }
  }
}
