@import './common.less';

.aria-hide {
  display: none !important;
}

.aria-active {
  .aria-theme-default {
    &:focus {
      outline: 3px solid red;
    }
    * {
      &:focus {
        outline: 3px solid red;
      }
    }
  }

  .aria-theme-white {
    background-color: white !important;
    color: black !important;
    &:focus {
      outline: 3px solid black;
    }
    * { // TODO: 看看博物馆项目代码有没有精细地只给需要变色的元素添加class。
      background-color: white !important;
      color: black !important;
      &:focus {
        outline: 3px solid black;
      }
    }
    a {
      color: blue !important;
    }
    &.aria-inverse-theme {
      background-color: black !important;
      color: white !important;
    }
    .aria-inverse-theme {
      background-color: black !important;
      color: white !important;
    }
  }

  .aria-theme-blue {
    background-color: blue !important;
    color: yellow !important;
    &:focus {
      outline: 3px solid blue;
    }
    * {
      background-color: blue !important;
      color: yellow !important;
      &:focus {
        outline: 3px solid blue;
      }
    }
    a {
      color: white !important;
    }
    &.aria-inverse-theme {
      background-color: yellow !important;
      color: blue !important;
    }
    .aria-inverse-theme {
      background-color: yellow !important;
      color: blue !important;
    }
  }

  .aria-theme-yellow {
    background-color: yellow !important;
    color: black !important;
    &:focus {
      outline: 3px solid yellow;
    }
    * {
      background-color: yellow !important;
      color: black !important;
      &:focus {
        outline: 3px solid yellow;
      }
    }
    a {
      color: blue !important;
    }
    &.aria-inverse-theme {
      background-color: black !important;
      color: yellow !important;
    }
    .aria-inverse-theme {
      background-color: black !important;
      color: yellow !important;
    }
  }

  .aria-theme-black {
    background-color: black !important;
    color: yellow !important;
    &:focus {
      outline: 3px solid black;
    }
    * {
      background-color: black !important;
      color: yellow !important;
      &:focus {
        outline: 3px solid black;
      }
    }
    a {
      color: white !important;
    }
    &.aria-inverse-theme {
      background-color: yellow !important;
      color: black !important;
    }
    .aria-inverse-theme {
      background-color: yellow !important;
      color: black !important;
    }
  }
}

body.aria-active {
  margin-top: @accessibility-menu-height;
}

body.aria-active.aria-magnifying {
  margin-bottom: @magnify-area-height;
}

html.aria-active {
  scroll-padding-top: @accessibility-menu-height;
}