// Copyright (C) 2018 Avatao.com Innovative Learning Kft.
// All Rights Reserved. See LICENSE file for details.

@import "../../assets/scss/variables.scss";
@import "../../assets/scss/mixins/layout.scss";

.tfw-ide-pin {
  button {
    background-color: white;
    width: 50px;
    height: auto;
    padding: 0;
    margin-bottom: 5vh;
    cursor: pointer;
    border: 1px solid $tao-gray-200;
    transition: all 0.18s ease;
    box-shadow: 0 4px 8px 0 rgba($tao-gray-500, 0.2), 0 4px 10px 0 rgba($tao-gray-500, 0.09);

    &:hover,
    &:focus,
    &:active,
    &.active {
      box-shadow: 0 4px 8px 0 rgba($tao-blue-500, 0.4), 0 8px 20px 0 rgba($tao-blue-500, 0.39);
      border: 1px solid $tao-blue-200;
    }

    &:focus,
    &:active,
    &.active {
      outline: none;
      width: 48px;
    }
  }
}