/**
 * @file
 * Support Area.
 */

.support-area {
  position: fixed;
  bottom: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 999;
  .support-button {
    display: flex;
    align-items: center;
    margin: 2px 0;
    border-radius: $nttdata-radius;
    cursor: pointer;
    height: 35px;
    min-width: 35px;
    background-color: $black-pearl;
    box-shadow: -2px 2px 4px $shadow-30;
    &:hover {
      background-color: $smart-navy;
    }
    .btn-icon {
      cursor: pointer;
      height: 35px;
      width: 35px;
      background-repeat: no-repeat;
      background-size: auto 70%;
      background-position: center;
      &:focus {
        @include focus-outline;
      }
    }
    &.open-btn {
      position: relative;
      width: 35px;
      z-index: 1;
      .btn-icon {
        @include transition(all 0.3s ease-out);
        background-image: url("data:image/svg+xml,%3csvg width='16' height='16'  viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='%23fff' d='M512 256c0 141.4-114.6 256-256 256S0 397.4 0 256S114.6 0 256 0S512 114.6 512 256zM161.5 169.9c-12.2-5.2-26.3 .4-31.5 12.6s.4 26.3 12.6 31.5l11.9 5.1c17.3 7.4 35.2 12.9 53.6 16.3v50.1c0 4.3-.7 8.6-2.1 12.6l-28.7 86.1c-4.2 12.6 2.6 26.2 15.2 30.4s26.2-2.6 30.4-15.2l24.4-73.2c1.3-3.8 4.8-6.4 8.8-6.4s7.6 2.6 8.8 6.4l24.4 73.2c4.2 12.6 17.8 19.4 30.4 15.2s19.4-17.8 15.2-30.4l-28.7-86.1c-1.4-4.1-2.1-8.3-2.1-12.6V235.5c18.4-3.5 36.3-8.9 53.6-16.3l11.9-5.1c12.2-5.2 17.8-19.3 12.6-31.5s-19.3-17.8-31.5-12.6L338.7 175c-26.1 11.2-54.2 17-82.7 17s-56.5-5.8-82.7-17l-11.9-5.1zM256 160c22.1 0 40-17.9 40-40s-17.9-40-40-40s-40 17.9-40 40s17.9 40 40 40z'/%3e%3c/svg%3e");
      }
      &.active {
        .btn-icon {
          background-image: url("data:image/svg+xml,%3csvg width='16' height='16'  viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='%23fff' d='M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zm97.9-320l-17 17-47 47 47 47 17 17L320 353.9l-17-17-47-47-47 47-17 17L158.1 320l17-17 47-47-47-47-17-17L192 158.1l17 17 47 47 47-47 17-17L353.9 192z'/%3e%3c/svg%3e");
        }
      }
    }
    .btn-state {
      display: flex;
      align-items: center;
      @include transition(all 0.3s ease-out);
      &:before {
        content: '';
        display: inline-block;
        width: 30px;
        height: 24px;
        margin-right: 5px;
        border-radius: 3px;
        background-repeat: no-repeat;
        background-size: 70%;
        background-position: center;
        background-color: $text-white;
        background-image: url("data:image/svg+xml,%3csvg width='16' height='16'  viewBox='0 0 576 512' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='%23070e27' d='M384 128c70.7 0 128 57.3 128 128s-57.3 128-128 128H192c-70.7 0-128-57.3-128-128s57.3-128 128-128H384zM576 256c0-106-86-192-192-192H192C86 64 0 150 0 256S86 448 192 448H384c106 0 192-86 192-192zM192 352c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96s43 96 96 96z'/%3e%3c/svg%3e");
      }
      &.active {
        &:before {
          background-image: url("data:image/svg+xml,%3csvg width='16' height='16'  viewBox='0 0 576 512' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='%23070e27' d='M192 64C86 64 0 150 0 256S86 448 192 448H384c106 0 192-86 192-192s-86-192-192-192H192zM384 352c-53 0-96-43-96-96s43-96 96-96s96 43 96 96s-43 96-96 96z'/%3e%3c/svg%3e");
        }
      }
    }
    &.dark-btn {
      .btn-icon {
        background-image: url("data:image/svg+xml,%3csvg width='16' height='16'  viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='%23fff' d='M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z'/%3e%3c/svg%3e");
      }
    }
    &.contrast-btn {
      .btn-icon {
        background-image: url("data:image/svg+xml,%3csvg width='16' height='16'  viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='%23fff' d='M448 256c0-106-86-192-192-192V448c106 0 192-86 192-192zm64 0c0 141.4-114.6 256-256 256S0 397.4 0 256S114.6 0 256 0S512 114.6 512 256z'/%3e%3c/svg%3e");
      }
    }
  }
  .support-dropdown {
    flex-direction: column-reverse;
    display: flex;
    @include transition(all 0.3s ease-out);
    position: relative;
    bottom: -65px;
    opacity: 0;
    visibility: hidden;
    z-index: 0;
    &.active {
      bottom: 0px;
      opacity: 1;
      visibility: visible;
    }
  }
}