.accessory-line {
  border: 1px solid rgba(#000, 0.2);
  margin: 5px;
  padding: 3px;
}

.icon-box {
  &_container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  &_item {
    width: 130px;
    height: 100px;

    padding: 5px;
    cursor: pointer;

    display: flex;
    flex-direction: column;
    align-items: center;

    span {
      font-size: 12px;
      line-height: 14px;
    }

    &.disabled {
      color: rgba(#000, 0.2);
      cursor: not-allowed;
      position: relative;

      &::before {
        content: 'Deprecated';
        font-size: 10px;
        color: rgba(255, 0, 0, 0.4);
        position: absolute;
        top: 10px;
        padding: 3px;
      }

      &:hover {
        border-color: rgba(#000, 0.2);
        color: rgba(#000, 0.2);
        .mat-icon {
          color: rgba(#000, 0.2);
        }
        span {
          color: rgba(#000, 0.2);
        }
      }
    }

    &:hover {
      border-color: #006a6a;

      .mat-icon {
        color: #006a6a;
      }

      span {
        color: #006a6a;
      }
    }

    .mat-icon {
      margin: 25px 0 6px 0;
    }
    span {
      text-align: center;
      padding: 0 3px;
      word-break: break-word;
    }
  }
}