/*
 * https://github.com/morethanwords/tweb
 * Copyright (C) 2019-2021 Eduard Kuzmenko
 * https://github.com/morethanwords/tweb/blob/master/LICENSE
 */

.themes {
  &-container {
    display: flex;
    height: 6.5rem;
    position: relative;
    align-items: center;

    @include respond-to(not-handhelds) {
      width: calc(100% + 1rem);
      margin: 0 -.5rem;
      padding: 0;
    }

    // @include respond-to(handhelds) {
    //   &:after {
    //     width: .25rem !important;
    //   }
    // }

    &:before,
    &:after {
      content: " ";
      display: block;
      width: .5rem;
      height: .5rem;
      flex: 0 0 auto;
    }
  }
}

.theme {
  &-container {
    height: calc(100% - .5rem);
    margin: 0 .25rem;
    border-radius: $border-radius-medium;
    width: 4.5rem;
    flex: 0 0 auto;
    position: relative;
    display: flex;
    justify-content: center;
    cursor: pointer;
    // transform: scale(1);

    // @include animation-level(2) {
    //   transition: transform var(--transition-standard-in);
    // }

    // &:active {
    //   transform: scale(.9);
    // }

    &:before {
      position: absolute;
      content: " ";
      top: -4px;
      right: -4px;
      bottom: -4px;
      left: -4px;
      border-radius: #{$border-radius-medium + 4px};
      border: 2px solid var(--primary-color);
      opacity: 0;
      transform: scale(.86);

      html.is-safari & {
        transform: none !important;
      }

      @include animation-level(2) {
        transition: transform var(--transition-standard-in), opacity var(--transition-standard-in);
      }
    }

    &.active {
      pointer-events: none;

      &:before {
        transform: scale(1);
        opacity: 1;
      }
    }

    .background-item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      pointer-events: none;
    }
  }

  &-emoticon {
    position: absolute;
    bottom: .5rem;
    width: 1.75rem;
    height: 1.75rem;
    pointer-events: none;
    z-index: 1;

    html:not(.is-safari) & {
      transform-origin: center bottom;
      transform: scale(1);
    }

    @include animation-level(2) {
      transition: transform var(--transition-standard-in);
    }
  }

  &-bubble {
    width: 2.5rem;
    height: 1.25rem;
    border-radius: 1.75rem;
    background-color: #fff;
    position: absolute;
    pointer-events: none;

    &.is-out {
      top: .5rem;
      right: .375rem;
      background-color: var(--light-filled-message-out-primary-color);
    }

    &.is-in {
      background-color: var(--message-background-color);
      top: calc(1.25rem + .5rem + .25rem);
      left: .375rem;
    }
  }
}